<template>
    <div class="box box6" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <img :src="imgTop" alt="" class="img_top">
        <img :src="imgTop" alt="" class="img_bg">
        <img @click="goToBox7" :src="bgImg" alt="" class="img_main">
        <div class="swiper">
            <img :src="s1" class="swiper-img active" />
            <img :src="s2" class="swiper-img" />
            <img :src="s3" class="swiper-img" />
            <img :src="s4" class="swiper-img" />
            <img :src="s5" class="swiper-img" />
            <img :src="s6" class="swiper-img" />
            <img :src="s7" class="swiper-img" />
            <img :src="s8" class="swiper-img" />
        </div>

        <div class="input-carousel-wrap">
            <div class="carousel-text" id="carousel-text">电子证照</div>
        </div>

        <div class="test">
            <div class="box6_s_1">浙江省</div>
            <div class="box6_s_2">
                <div class="tx">
                    <img :src="txImg" alt="">
                </div>
                <div class="box6_s_3">
                    <span>Hi,&nbsp;</span>
                    <span class="star">**</span>
                    <span>杰</span>
                </div>

                <!-- Hi,&nbsp;*蓉蓉 -->
            </div>
        </div>
    </div>
</template>

<script setup>

// import ImmersiveNavbar from '@/components/ImmersiveNavbar.vue'
import { useRouter } from 'vue-router'
// import { onMounted } from 'vue'
import imgTop from '@/assets/img/07_1.png'
import bgImg from '@/assets/img/07.jpg'
import s1 from '@/assets/img/s_1.png'
import s2 from '@/assets/img/s_2.png'
import s3 from '@/assets/img/s_3.png'
import s4 from '@/assets/img/s_4.png'
import s5 from '@/assets/img/s_5.png'
import s6 from '@/assets/img/s_6.png'
import s7 from '@/assets/img/s_7.png'
import s8 from '@/assets/img/s_8.png'
// import txImg from '@/assets/img/tx.jpg'
import txImg from '@/assets/img/user/touxiang.jpg'
// import txImg from '@/assets/img/user/touxiang1.jpg'
import { StorageUtils } from '@/utils/storage'

const router = useRouter()
function goToBox7() {
    router.push('/box7')
}

let touchStartX = 0
let touchStartY = 0
let touchEndX = 0
let touchEndY = 0

function handleTouchStart(e) {
    if (e.touches && e.touches.length === 1) {
        touchStartX = e.touches[0].clientX
        touchStartY = e.touches[0].clientY
    }
}

function handleTouchEnd(e) {
    if (e.changedTouches && e.changedTouches.length === 1) {
        touchEndX = e.changedTouches[0].clientX
        touchEndY = e.changedTouches[0].clientY
        const deltaX = touchEndX - touchStartX
        const deltaY = touchEndY - touchStartY
        if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
                // 右滑，上一页
                router.push('/box3')
            } else {
                // 左滑，下一页
                const hasVisited = StorageUtils.getData('box6_seen')
                if (hasVisited) {
                    router.push('/box9')
                } else {
                    router.push('/box7')
                }
            }
        }
    }
}
</script>

<script>
/* global plus */

export default {
    name: 'BoxSix',

    mounted() {
        this.initSwiper();
        this.initCarousel();
        document.addEventListener('plusready', this.handleBackButton);
    },
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        if (window.vueApp && window.vueApp.$router) {
                            window.vueApp.$router.push('/box3');
                        } else {
                            // 备用方案
                            let mainWebview = plus.webview.getLaunchWebview();
                            mainWebview.evalJS(`
                        if (window.vueApp && window.vueApp.$router) {
                            window.vueApp.$router.push('/box3');
                        } else {
                            location.hash = '#/box3';
                        }
                    `);
                        }
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        initSwiper() {
            const swiperImgs = document.querySelectorAll('.swiper-img');
            let currentIndex = 0;

            setInterval(() => {
                swiperImgs[currentIndex].classList.remove('active');
                currentIndex = (currentIndex + 1) % swiperImgs.length;
                swiperImgs[currentIndex].classList.add('active');
            }, 3000);
        },
        initCarousel() {
            const carouselText = document.getElementById('carousel-text');
            const texts = ['电子证照', '数字身份', '智慧政务'];
            let currentTextIndex = 0;

            setInterval(() => {
                carouselText.classList.add('slide-up');

                setTimeout(() => {
                    currentTextIndex = (currentTextIndex + 1) % texts.length;
                    carouselText.textContent = texts[currentTextIndex];
                    carouselText.classList.remove('slide-up');
                    carouselText.classList.add('slide-down');

                    setTimeout(() => {
                        carouselText.classList.remove('slide-down');
                        carouselText.classList.add('show');
                    }, 200);
                }, 200);
            }, 4000);
        }
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
    }
}
</script>

<style scoped lang="less">
.box6_s_3 {
    display: flex;
    align-items: center;


    .star {
        vertical-align: middle;

    }

}

/* 基于375px基准的响应式设计 */
.box {
    width: 100vw;
    /* max-width: 375px; */
    min-height: 100vh;
    position: relative;
    overflow: visible;
    /* margin: 0 auto; */
    background: #fff;
    display: flex;
    flex-direction: column;
}

.img_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 9;
}

.img_bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 95px;
    left: 0;
    z-index: 1;
    filter: brightness(0.9);
    object-fit: cover;
    max-width: 100%;
}

.img_main {
    width: 100%;
    height: auto;
    position: absolute;
    top: 90px;
    left: 0;
    z-index: 2;
    object-fit: cover;
    max-width: 100%;
    display: block;
}

.swiper {
    width: calc(100% - 31px);
    height: 90px;
    position: absolute;
    top: 257px;
    left: 15.5px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.swiper-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.swiper-img.active {
    opacity: 1;
    z-index: 2;
}

/* .carousel-outer {
    position: relative;
    width: 100vw;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* .input-carousel-wrap {
    position: absolute;
    width: 120px;
    height: 32px;
    top: 207.611px;
    left: 55.0293px;
    padding-left: 20px;
} */

.carousel-text {
    position: absolute;
    left: 53.8897px;
    top: 206.67448px;
    line-height: 32px;
    color: #2c3e50;
    background: transparent;
    z-index: 2;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
    font-size: 15px;
    opacity: 1;
    text-align: center;
    font-weight: bold;
}

.carousel-text.slide-up {
    transform: translateY(-100%);
    opacity: 0;
}

.carousel-text.slide-down {
    transform: translateY(100%);
    opacity: 0;
}

.carousel-text.show {
    transform: translateY(0);
    opacity: 1;
}

.test {
    width: calc(100% - 31px);
    height: 35px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 15.5px;
    top: 98px;
    z-index: 4;
}

.box6_s_1 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}

.box6_s_2 {
    font-size: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    width: 90px;
    justify-content: space-between;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-weight: 500;
}

.tx {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.tx:hover {
    transform: scale(1.1);
}

.tx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 响应式媒体查询 */
@media (max-width: 375px) {
    .box {
        width: 100vw;
    }

    .img_top {
        width: 100vw;
        left: 0;
        transform: none;
    }

    .img_bg,
    .img_main {
        width: 100vw;
    }

    .swiper {
        width: calc(100vw - 31px);
        left: 15.5px;
    }

    .input-carousel-wrap {
        left: 4vw;
    }

    .test {
        width: calc(100vw - 31px);
        left: 15.5px;
    }
}

/* 大屏幕适配 */
@media (min-width: 376px) {
    .box {
        width: 375px;
        margin: 0 auto;
    }

    .input-carousel-wrap {
        left: 15px;
        /* 大屏幕时使用固定像素 */
    }
}

/* 添加一些动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.box6 {
    animation: fadeIn 0.6s ease-out;
}

/* 优化滚动条 */
.box::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
</style>